<template>
  <!-- 角色卡片 -->
  <div class="character-card fade-in" @click="startChat">
    <div class="character-avatar">
      <i :class="character.icon"></i>
    </div>
    <div class="character-name">{{ character.name }}</div>
    <div class="character-description">{{ character.description }}</div>
    <div class="character-skills">
      <span v-for="skill in character.skills" :key="skill" class="skill-tag">{{ skill }}</span>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';
const props = defineProps({
  character: Object
});

const startChat = () => {
  alert(`即将与 ${props.character.name} 开始对话！`);
};
</script>

<style scoped>
.character-card {
  background: rgba(0, 0, 0, 0);
  border-radius: 20px;
  border: 1px solid rgba(74, 108, 247, 0.2);
  padding: 25px;
  cursor: pointer;
  transition: all 0.3s;
  flex: 0 0 300px; 
  height: 380px;
}

.character-card:hover {
  transform: translateY(-10px);
  border-color: var(--primary);
}

.character-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: white;
}

.character-name {
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 10px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.character-description {
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 15px;
  line-height: 1.5;
  font-size: 0.95rem;
}

.skill-tag {
  background: rgba(74, 108, 247, 0.2);
  border: 1px solid rgba(74, 108, 247, 0.4);
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  color: var(--text-light);
  margin: 2px;
}
</style>
